<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">

    <style type="text/css">
        .layui-col {
            height: 40px;
            line-height: 40px;
        }
        .layui-input-block{
            margin-left: auto;
        }
    </style>
</head>
<body>
<!--任务：
    弹出层保存按钮还有问题
    查询按钮还有问题
    分页还有问题-->
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <!---->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!--头工具栏-->
            <div class="layui-row">
                <!--增删改-->
                <div class="layui-col" style="float:left">
                    <button type="button" class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon"></i>新增区域</button>
                    <button type="button" class="layui-btn"  lay-event="del"><i class="layui-icon"></i>删除区域</button>
                    <button type="button" class="layui-btn layui-btn-danger" lay-event="edit"><i class="layui-icon"></i>修改区域</button>
                </div>
                <!--查-->
                <div class="layui-col" style="float:left">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                        <input type="text" id="EquipmentID" name="EquipmentID" lay-verify="required" placeholder="请输入" class="layui-input">
                                </div>
                                <div class="layui-input-block layui-input-inline">
                                    <button type="button" class="layui-btn" lay-filter="formDemo" id="doSearch"><i class="layui-icon layui-icon-search"></i>查询</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
    </script>

    <!--表格弹出层-->
    <div style="display:none; padding: 20px" id="AddOrUpdate">
        <form class="layui-form" action="" lay-filter="dataForm" id="dataForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="EquipmentID" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">设备名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="EquipmentName" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">设备类型</label>
                    <div class="layui-input-inline">
                        <input type="text" name="EquipmentType" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">负责人</label>
                    <div class="layui-input-inline">
                        <input type="text" name="principal" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="Remark" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="CreatTime" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">更新时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="UpdateTime" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="text-align:center;">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">保存</button>
                    <button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!--表格弹出层结束-->

    <script src="/static/layui/layui.js" charset="utf-8"></script>

    <script>
        layui.use(['table', 'form','laypage','jquery'],function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.jquery;

            var tableIns=table.render({
                elem: '#test'
                , url: 'demo1.json'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print']
                , title: '用户数据表'
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res //解析数据列表
                    };
                }
                , page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    , groups: 5 //只显示 1 个连续页码
                    , first: '首页' //不显示首页
                    , last: '尾页' //不显示尾页
                }
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {type:'checkbox'}
                    ,{field: 'EquipmentID', title: '设备ID', align: 'center', sort: true}
                    , {field: 'EquipmentName', title: '设备名称', align: 'center'}
                    , {field: 'EquipmentType', title: '设备类型', align: 'center'}
                    , {field: 'Principal', title: '负责人', align: 'center'}
                    , {field: 'Remark', title: '备注', align: 'center'}
                    , {field: 'CreatTime', title: '创建时间', align: 'center', sort: true}
                    , {field: 'UpdateTime', title: '更新时间', align: 'center',sort: true}
                ]]
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                //绑定头工具栏事件
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'del':
                        layer.confirm('真的删除行么', function (index) {
                            //绑定删除按钮
                        })
                        break;
                    case 'edit':
                        var data = checkStatus.data;
                        print(data)
                        if (data.length > 1) {
                            layer.msg('一次只能选择一条修改')
                        }else if(data.length == 0){
                            layer.msg('一次至少选择一条修改')
                        }else{
                            openUpdate(data);
                        }
                        break;
                    case 'add':
                        openAdd();
                        break;
                }
            });

            var url;
            var mainIndex;
            function openAdd() {
                mainIndex=layer.open({
                    type:1,
                    title:'增加',
                    content:$("#AddOrUpdate"),
                    success:function (index) {
                        //清空数据表格
                        $("#dataForm")[0].reset();
                        url="指定增加方法的URL";
                    }
                })
            }

            function openUpdate(data) {
                mainIndex=layer.open({
                    type:1,
                    title:'修改',
                    content:$("#AddOrUpdate"),
                    success:function (index) {
                        form.val("dataForm",data);
                        url="指定修改方法的url";
                   }
                })
            }

            //保存
            form.on("submit(doSubmit)",function (obj) {
                //序列化表单数据
                var params=("#dataForm").serialize();
                $.post(url,params,function (obj) {
                    layer.msg("成功")
                    //关闭弹出层
                    layer.close(mainIndex)
                    //刷新数据表格
                    tableIns.reload();
                })
            })
        });
    </script>

</body>
</html>